<template>
  <div v-loading="loading" style="position: relative; height: 100%">
    <div
      style="background-color: #fff; padding: 16px; text-align: left"
      v-if="!loading"
    >
      <div>快递单号：{{ order_logistic_no }}</div>
      <div style="font-size: 12px; color: #999; margin-top: 8px">
        <span> 提交时间：{{ baseData.ctime }}</span>
        <span style="margin-left: 40px">
          用户信息：
          {{ userData?.user_nick }}({{ userData?.id }})
        </span>
        <span style="margin-left: 40px">
          订单状态：{{
            getLable(transferStateOptions, baseData.order_state)
          }}</span
        >
        <span style="margin-left: 40px">
          运输方式：{{ getLable(modeOptions, baseData.transfer_mode) }}</span
        >
        <span style="margin-left: 40px">
          货架号：{{ baseData.order_shelf_no }}
        </span>
        
      </div>
      <div style="font-size: 12px; color: #999; margin-top: 8px">
        
        <span >
          包裹类型：{{ getLable(typeOptions, baseData.order_transport_type) }}
        </span>
         <span style="margin-left: 40px">
          包裹数量：{{ baseData.order_piece }}
        </span>
      </div>
    </div>
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      @tab-click="handleClick"
      style="background-color: #fff; margin-top: 16px; padding: 16px"
    >
      <el-tab-pane label="订单信息" name="third">
        <el-divider content-position="left">基础信息</el-divider>

        <el-descriptions :column="3" size="defalut" border>
          <el-descriptions-item label="快递单号">
            {{ baseData.order_logistic_no }}
          </el-descriptions-item>

          <el-descriptions-item label="柜号">
            {{ baseData.transfer_cabinet_number  }}
          </el-descriptions-item>
          <el-descriptions-item label="订单状态">
            {{ getLable(transferStateOptions, baseData.order_state) }}
          </el-descriptions-item>
          <el-descriptions-item label="包裹类型">
            {{ getLable(typeOptions, baseData.order_transport_type) }}
          </el-descriptions-item>
           <el-descriptions-item label="包裹数量">
            {{ baseData.order_piece }}
          </el-descriptions-item>
          <el-descriptions-item label="包裹规格">
            {{ baseData.order_good_length }} *{{
              baseData.order_good_width
            }}
            *{{ baseData.order_good_height }} cm
          </el-descriptions-item>
         
          <el-descriptions-item label="包裹体积">
            {{ (Number(baseData.order_good_length) * Number(baseData.order_good_width) * Number(baseData.order_good_height) * Number(baseData.order_piece)/1000000).toFixed(3) }} m³
          </el-descriptions-item>
          <el-descriptions-item label="包裹重量">
            {{ baseData.order_good_weight }} kg
          </el-descriptions-item>
           <el-descriptions-item label="总重量">
            {{ (Number(baseData.order_good_weight) * Number(baseData.order_piece)).toFixed(2) }} kg
          </el-descriptions-item>
        </el-descriptions>
        <el-divider content-position="left">入库信息</el-divider>
        <el-descriptions :column="2" size="defalut" border v-if="!loading">
          <el-descriptions-item label="入库时间">
            {{
              baseData.order_inbound_time ? baseData.order_inbound_time : "-"
            }}
          </el-descriptions-item>

          <el-descriptions-item label="入库人员">
            {{ baseData.order_inbound_manage_name }}
          </el-descriptions-item>
          <el-descriptions-item label="入库图片">
            <template v-if="baseData.order_inbound_images?.length">
              <el-image
                v-for="(item, index) in baseData.order_inbound_images"
                :key="index"
                style="width: 100px; height: 100px"
                :src="$imageBaseUrl + item"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[$imageBaseUrl + item]"
                :initial-index="0"
                fit="cover"
              />
            </template>
          </el-descriptions-item>
        </el-descriptions>
        <el-divider content-position="left">出库信息</el-divider>
        <el-descriptions :column="3" size="defalut" border v-if="!loading">
          <el-descriptions-item label="出库单号">
            {{ baseData.transfer_outbound_no }}
          </el-descriptions-item>
          <el-descriptions-item label="出库时间">
            {{
              baseData.transfer_outbound_time ? baseData.transfer_outbound_time : "-"
            }}
          </el-descriptions-item>

          <el-descriptions-item label="出库人员">
            {{ baseData.transfer_outbound_manage_name }}
          </el-descriptions-item>
          <el-descriptions-item label="出库图片">
            <template v-if="baseData.transfer_outbound_images?.length">
              <el-image
                v-for="(item, index) in baseData.transfer_outbound_images"
                :key="index"
                style="width: 100px; height: 100px"
                :src="$imageBaseUrl + item"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[$imageBaseUrl + item]"
                :initial-index="0"
                fit="cover"
              />
            </template>
          </el-descriptions-item>
        </el-descriptions>
        <el-divider content-position="left">支付信息</el-divider>
        <el-descriptions
          :column="2"
          size="defalut"
          border
          v-if="baseData.pay_state == '2'"
        >
          <el-descriptions-item label="支付单号">
            {{ payData.pay_no }}
          </el-descriptions-item>
          <el-descriptions-item label="支付方式">
            {{ payData.pay_type == "wechat" ? "微信支付" : "转账截图" }}
          </el-descriptions-item>
          <el-descriptions-item label="订单状态">
            支付成功
          </el-descriptions-item>
          <el-descriptions-item label="支付金额">
            {{ payData.pay_total }}
          </el-descriptions-item>
          <el-descriptions-item
            label="转账截图"
            v-if="payData.pay_type != 'wechat'"
          >
            <el-image
              style="width: 100px; height: 100px"
              :src="$imageBaseUrl + baseData.transfer_audit_image[0]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[
                $imageBaseUrl + baseData.transfer_audit_image[0],
              ]"
              :initial-index="0"
              fit="cover"
              v-if="baseData.transfer_audit_image?.length"
            ></el-image>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="2" size="defalut" border v-else>
          <el-descriptions-item label="支付状态">
            {{ getLable(payStateOptions, baseData.pay_state) }}
          </el-descriptions-item>
        </el-descriptions>
        <el-divider content-position="left" v-if="baseData.delivery_time"
          >派送信息</el-divider
        >
        <el-descriptions
          :column="2"
          size="defalut"
          border
          v-if="!loading && baseData.delivery_time"
        >
          <el-descriptions-item label="派送时间">
            {{ baseData.delivery_time ? baseData.delivery_time : "-" }}
          </el-descriptions-item>
          <el-descriptions-item
            label="查询网址"
            v-if="baseData.delivery_type == 'express'"
          >
            
            <a :href="baseData.delivery_web" target="_blank">{{ baseData.delivery_web }}</a>
          </el-descriptions-item>
          <el-descriptions-item label="派送方式">
            {{ getLable(dispatchStatus, baseData.delivery_type) }}
          </el-descriptions-item>
          <el-descriptions-item label="派送备注">
            {{ baseData.delivery_remark }}
          </el-descriptions-item>
          <el-descriptions-item label="派送图片">
            <template v-if="baseData.delivery_images?.length">
              <el-image
                v-for="(item, index) in baseData.delivery_images"
                :key="index"
                style="width: 100px; height: 100px"
                :src="$imageBaseUrl + item"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[$imageBaseUrl + item]"
                :initial-index="0"
                fit="cover"
              />
            </template>
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>

      <el-tab-pane label="轨迹查询" name="five">
        <el-timeline style="max-width: 200px; padding: 20px; text-align: left">
          <el-timeline-item
            v-for="(activity, index) in trackData"
            :key="index"
            :timestamp="activity.track_time"
          >
            {{ activity.track_type_dim_text }}
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
      <el-tab-pane label="操作日志" name="six">
        <el-table :data="trackData" border class="table-box" v-if="!loading">
          <el-table-column prop="index" label="序号" width="80">
            <template v-slot="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="track_time" label="时间"> </el-table-column>
          <el-table-column prop="charging" label="操作员">
            <template v-slot="scope">
              {{ scope.row.manage_account_model_text }}
            </template>
          </el-table-column>
          <el-table-column prop="track_type_dim_text" label="操作内容">
            <template v-slot="scope">
              {{ scope.row.track_type_dim_text }}
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="其他费用" name="nine">
        <el-table :data="baseData.order_items" border class="table-box">
          <el-table-column prop="name" label="附加费用名称">
            <template v-slot="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="附加费用金额（元）">
            <template v-slot="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="type" label="附加费用类型">
            <template v-slot="scope">
              {{ scope.row.type == 1 ? "可选费用" : "必要费用" }}
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

    </el-tabs>
    <div style="height: 200px"></div>
  </div>
</template>

<script setup>
import {
  watch,
  getCurrentInstance,
  computed,
  reactive,
  ref,
  defineEmits,
  onMounted,
} from "vue";
import { apis } from "./data.js";
import ekDialog from "@/components/business/ekDialog/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekSelect from "@/components/form/ekSelect/index.vue";
import ekTableSelect from "@/components/form/ekTableSelect/index.vue";
import ekSelectModel from "@/components/form/ekSelectModel/index.vue";
import ekTextarea from "@/components/form/ekTextarea/index.vue";
import ekCheckbox from "@/components/form/ekCheckbox/index.vue";
import ekRadio from "@/components/form/ekRadio/index.vue";
import { objectAssignment, getLable, transformArray } from "@/utils/common.js";
import { getDimensionByCode } from "@/utils/sys.js";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import moment from "moment";

// store 获取
const store = useStore();
// 菜单是否开启
const menuOpened = computed(() => {
  return store.getters["layout/getMenuOpened"];
});
const route = useRoute();
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http, $ekLoading, $ekMessage, $imageBaseUrl } =
  globalProperties;

const emit = defineEmits(["update:visiable", "submit"]);

const order_logistic_no =
  route.query.order_logistic_no || route.params.order_logistic_no;

let auditForm = ref({
  transfer_audit_message: "",
  transfer_pass: "pass",
});

const showPreview = ref(false);
const imageList = ref([]);
const handleShowImage = (list) => {
  showPreview.value = true;
  let arr = [];
  for (let item of list) {
    arr.push($imageBaseUrl + item);
  }
  console.log(arr, "arr");
  imageList.value = arr;
};
const charging = { volume: "按体积", weight: "按重量", piece: "按件数" };
const loading = ref(false);
let forms = ref(null);
let form = ref(null);
const activeName = ref("third");

const detail = ref({});
const baseData = ref({});

const modeOptions = ref([]);
const typeOptions = ref([]);

const payData = ref({});
const trackData = ref([]);
const userData = ref({});
const handleClick = (name) => {
  activeName.value = name;
};
// 初始化表单
async function init() {
  loading.value = true;
  // 详情或者编辑
  $http
    .get(apis.detail, {
      params: {
        order_logistic_no: order_logistic_no || null,
      },
    })
    .then((res) => {
      if (Object.keys(res.data).length) {
        form.value = {
          ...res.data.quotation,
        };

        typeOptions.value = res.data.type;
        modeOptions.value = res.data.mode;

        baseData.value = res.data.base_data;

        payData.value = res.data.pay_data;
        trackData.value = res.data.track;
        userData.value = res.data.user_data;

        console.log(typeOptions, "typeOptions");
      }
      loading.value = false;
    });
}

const quotationOptions = ref([]);
const transferStateOptions = ref([]);
const payStateOptions = ref([]);
const dispatchStatus = ref([]);
onMounted(async () => {
  init();
  quotationOptions.value = await getDimensionByCode("DIM_QUOTATION_STATE");
  transferStateOptions.value = await getDimensionByCode("DIM_ORDER_STATE");
  payStateOptions.value = await getDimensionByCode("DIM_TRANSFER_PAY_STATE");
  dispatchStatus.value = await getDimensionByCode("DIM_TYPE_DELIVERY");
});
</script>

<style scoped lang="scss">
$sidebar-width: 64px;
// 侧边栏展开宽度
$sidebar-openwidth: 260px;
.audit {
  background-color: rgb(255, 255, 255);
  padding: 15px 30px;
  text-align: left;
  position: fixed;
  z-index: 99;
  bottom: 0;
  left: $sidebar-width;
  width: calc(100% - $sidebar-width);
  box-shadow: var(--base-box-shadow-dark);
  &.is-open {
    left: $sidebar-openwidth;
    width: calc(100% - $sidebar-openwidth);
  }
}
</style>
